<template>
  <view class="container">
    <view class="top">
      <view class="left" @click="toShopPage(props.data!.shopId)">
        <image class="shop-logo" :src="props.data?.shopLogo" />
        <span class="shop-name" v-html="markString(props.data!.shopName)"></span>
        <uni-icons type="right" size="15" color="#9b9b9b"></uni-icons>
      </view>
      <view
        class="order-state"
        :class="{
          'un-active':
            OrderState.ORDER_COMPLETED === props.data?.state ||
            OrderState.ORDER_CANCELED === props.data?.state ||
            OrderState.ORDER_EVALUATED === props.data?.state
        }"
      >
        {{ orderStateLabelOf(props.data?.state) }}
      </view>
    </view>
    <view class="order-dish-list" @click="toOrderPage(props.data!.id!)">
      <view class="order-dishes">
        <view
          class="dish"
          v-for="(dishInfo, index) in props.data?.dishList"
          :key="index"
          :class="{ 'first-dish': props.data?.dishList.length! > 1 && props.data?.dishList.length! - 1 === index }"
        >
          <image class="dish-image" :src="dishInfo.image" />
          <span
            class="dish-name"
            v-html="markString(dishInfo.name)"
            v-if="props.data?.dishList != null && props.data?.dishList.length > 1"
          ></span>
        </view>
      </view>
      <view class="first-dish-name" v-if="props.data?.dishList != null && props.data?.dishList.length === 1">
        {{ props.data?.dishList[0].name }}
      </view>
      <view class="dishes-statistics">
        <span class="amount">￥{{ props.data!.amount }}</span>
        <span>共{{ props.data!.dishList.length }}件</span>
      </view>
    </view>
    <view class="dish-operation">
      <span
        class="button order-pickup-pulse"
        v-if="
          ReceivingMethod.SELF_PICKUP === props.data?.receivingMethod &&
          OrderState.ORDER_COMPLETED > props.data?.state &&
          OrderState.WAITING_FOR_ACCEPTANCE < props.data?.state
        "
        @click="toOrderPage(props.data!.id!)"
        ><uni-icons custom-prefix="iconfont" type="icon-yiqucan" size="13" :color="pickupColor"></uni-icons
        >&nbsp;去取餐</span
      >
      <span class="button" v-if="OrderState.ORDER_COMPLETED === props.data?.state" @click="toEvaluate(data?.id!)"
        >✩ 评价</span
      >
      <span class="button" style="background: #ffdb51">再来一单</span>
    </view>
  </view>
</template>

<script setup lang="ts">
import { OrderState, orderStateLabelOf } from '@/enum/OrderState'
import { ReceivingMethod } from '@/enum/ReceivingMethod'
import { OrderForUser } from '@/types/response/order'
import { ref } from 'vue'
const props = defineProps({
  data: {
    type: Object as () => OrderForUser,
    require: true
  },
  searchMode: {
    type: Boolean,
    default: false
  },
  keyword: {
    type: String
  }
})
// 搜索关键字标记
function markString(str: string) {
  if (!props.searchMode || props.keyword == null || props.keyword === '') return str
  //, tagStart: string, substring: string, tagEnd: string
  const pattern = new RegExp(props.keyword, 'g')
  return str.replace(pattern, `<span style='color:#f79f00'>${props.keyword}</span>`)
}
// 去店铺页面
function toShopPage(shopId: number) {
  uni.navigateTo({ url: `/pages/shop/index?shopId=${shopId}` })
}
// 查看订单
function toOrderPage(orderId: number) {
  uni.navigateTo({ url: `/pages/order-pages/order-detail/index?orderId=${orderId}` })
}
// 去评分
function toEvaluate(orderId: number) {
  uni.navigateTo({ url: `/pages/evaluate/index?orderId=${orderId}` })
}

// === css vars ==
const pickupColor = '#FFB90F'
</script>

<style scoped lang="scss">
.container {
  margin: 0 4%;
  margin-bottom: 30rpx;
  padding: 30rpx;
  border-radius: 25rpx;
  background-color: #fff;
  box-sizing: border-box;

  .top {
    $top-height: 60rpx;

    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    line-height: $top-height;
    height: $top-height;

    .left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 0%;
      flex-grow: 1;

      .shop-logo {
        display: inline-block;
        overflow: hidden;
        width: $top-height;
        min-width: $top-height;
        height: $top-height;
        border-radius: 15rpx;
      }

      .shop-name {
        display: inline-block;
        overflow: hidden;
        margin: 0 15rpx;
        font-size: 27rpx;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .order-state {
    font-size: 30rpx;
  }

  .un-active {
    color: #797979;
  }

  .order-dish-list {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 20rpx 0;
    width: 100%;

    .order-dishes::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }

    .order-dishes {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      overflow: scroll;

      .first-dish {
        margin-right: 120rpx !important;
      }

      .dish {
        $dish-width: 140rpx;

        display: flex;
        margin-right: 25rpx;
        width: $dish-width;
        flex-direction: column;

        .dish-image {
          overflow: hidden;
          width: $dish-width;
          height: $dish-width;
          border-radius: 5rpx;
        }

        .dish-name {
          overflow: hidden;
          font-size: 25rpx;
          text-align: center;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .first-dish-name {
        flex-grow: 1;
        font-size: 26rpx;
      }
    }

    .dishes-statistics {
      position: absolute;
      right: 0;
      display: flex;
      justify-content: center;
      padding: 0 30rpx;
      height: 100%;
      font-size: 25rpx;
      text-align: center;
      background: linear-gradient(to left, #fff, #ffffff80);
      flex-direction: column;

      .amount {
        font-size: 35rpx;
        font-weight: 600;
        line-height: 40rpx;
      }
    }
  }

  .dish-operation {
    display: flex;
    justify-content: flex-end;
    width: 100%;

    .button {
      display: inline-block;
      margin-left: 20rpx;
      padding: 15rpx 28rpx;
      font-size: 24rpx;
      font-weight: 600;
      border: 1px solid #f3f3f3;
      border-radius: 15rpx;
    }

    .order-pickup-pulse {
      border: 1px solid v-bind(pickupColor);
      color: v-bind(pickupColor);
      box-sizing: border-box;
    }
  }
}
</style>
